<!--
    slider developer : @SerGioPlay
    developer website: https://sergioplay01.github.io/portfolio_sergio_play/
    slider version : 1.1
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/slider.css">
    <title>Example work slider 'SerGio Play'</title>
</head>
<body>
    <!--slider content and remote-->
    <div class="content"> <!--delete-->  <h1>Слайдер с описанием над изображением</h1>
        <div class="slider-container">
            <div class="slider">
              <img src="./img/image_3.jpg" alt="Image 1" />
              <div class="slider-text">
                <h3>Заголовок слайда 1</h3>
                <p>Описание слайда 1</p>
              </div>
            </div>
            <div class="slider">
              <img src="./img/image_2.jpg" alt="Image 2" />
              <div class="slider-text">
                <h3>Заголовок слайда 2</h3>
                <p>Описание слайда 2</p>
              </div>
            </div>
            <div class="slider">
              <img src="./img/wallpaperflare.com_wallpaper.jpg" alt="Image 3" />
              <div class="slider-text">
                <h3>Заголовок слайда 3</h3>
                <p>Описание слайда 3</p>
              </div>
            </div>
            <div class="slider">
                <img src="./img/image_4.jpg" alt="Image 3" />
                <div class="slider-text">
                  <h3>Заголовок слайда 3</h3>
                  <p>Описание слайда 3</p>
                </div>
              </div>
          <div class="slider-controls">
            <button class="prev-btn" onclick="previousSlide()"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="F-Chevron"> <polyline fill="none" id="Right" points="8.5 5 15.5 12 8.5 19" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg></button>
            <button class="next-btn" onclick="nextSlide"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="F-Chevron"> <polyline fill="none" id="Right" points="8.5 5 15.5 12 8.5 19" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg></button>
          </div>
        </div>
    </div>
  <!-- Добавьте другие слайдеры и их контролы по аналогии -->


    <script src="./js/slider.js"></script>
</body>
</html>
